import React from 'react'
import { snip, sty, g, Anim } from '../../tool'
import { observable, action } from 'mobx'
import { observer } from 'mobx-react'

let PPT = observer(class PPT extends React.PureComponent {
    ob = observable({
        num: 0,
        preY: 1,
        nextY: 1,
        preBGC: 'rgba(0,0,0,0.2)',
        nextBGC: 'rgba(0,0,0,0.2)',
        barAplha: 0,
        pre: action((v = 1) => {
            let num = this.ob.num - v
            num = num < 0 ? 0 : num
            this.ob.num = num
        }),
        next: action((v = 1) => {
            let num = this.ob.num + v
            num = num > this.props.children.length - 1 ? this.props.children.length - 1 : num
            this.ob.num = num
        }),
    })
    constructor(props) {
        super(props)
        this.createAnim()
        this.createKeyCode()
    }
    createKeyCode = () => {
        window.document.onkeydown = (evt) => {
            evt = (evt) ? evt : window.event
            if (evt.keyCode) {
                if (evt.keyCode === 37 || evt.keyCode === 65) {
                    this.handlePre()
                }
                else if (evt.keyCode === 39 || evt.keyCode === 68) {
                    this.handleNext()
                }
                else if (evt.keyCode === 49) { this.ob.num = 0 }
                else if (evt.keyCode === 50) { this.ob.num = 1 }
                else if (evt.keyCode === 51) { this.ob.num = 2 }
                else if (evt.keyCode === 52) { this.ob.num = 3 }
                else if (evt.keyCode === 53) { this.ob.num = 4 }
                else if (evt.keyCode === 54) { this.ob.num = 5 }
                else if (evt.keyCode === 55) { this.ob.num = 6 }
                else if (evt.keyCode === 56) { this.ob.num = 7 }
                else if (evt.keyCode === 57) { this.ob.num = 8 }
                else if (evt.keyCode === 58) { this.ob.num = 9 }
                else if (evt.keyCode === 48) { this.ob.num = 10 }
                else if (evt.keyCode === 81) {
                    this.ob.num = this.props.children.length - 1
                }
            }
        }
    }
    createAnim = () => {
        let y = 1.2
        let ala = 0.2
        let alb = 0.7
        this.preAnim = Anim.init(0.3, (p) => {
            this.ob.preY = Anim.motion(1, y, p)
            let alpha = Anim.motion(ala, alb, p)
            this.ob.preBGC = `rgba(0,0,0,${alpha})`
        })
        this.nextAnim = Anim.init(0.3, (p) => {
            this.ob.nextY = Anim.motion(1, y, p)
            let alpha = Anim.motion(ala, alb, p)
            this.ob.nextBGC = `rgba(0,0,0,${alpha})`
        })
        this.preAnimBack = Anim.init(0.3, (p) => {
            this.ob.preY = Anim.motion(y, 1, p)
            let alpha = Anim.motion(alb, ala, p)
            this.ob.preBGC = `rgba(0,0,0,${alpha})`
        })
        this.nextAnimBack = Anim.init(0.3, (p) => {
            this.ob.nextY = Anim.motion(y, 1, p)
            let alpha = Anim.motion(alb, ala, p)
            this.ob.nextBGC = `rgba(0,0,0,${alpha})`
        })
        this.barAnim = Anim.init(0.3, (p) => {
            this.ob.barAplha = Anim.motion(0, 1, p)
        })
        this.barAnimBack = Anim.init(0.3, (p) => {
            this.ob.barAplha = Anim.motion(1, 0, p)
        })
    }
    render() {
        let { children, ...rest } = this.props
        let naviBar = snip.css || {
            ...sty.pos('f'),
            ...sty.box('h'),
            backgroundColor: 'rgba(0,0,0,0.3)',
            width: '100%',
            height: '14%',
            bottom: 0,
            opacity: this.ob.barAplha,
        }
        let barMiddle = snip.css || {
            width: '75%',
            opacity: 0.8,
            ...sty.font('0.5rem', 400, '#fff')
        }
        let nextSty = snip.css || {
            // ...sty.pos('f'),
            ...sty.box('v'),
            ...sty.font('0.5rem', 300, '#fff'),
            width: g.px(80),
            height: g.px(40),
            borderRadius: g.px(10),
        }
        return (
            <div {...rest} style={{ ...sty.box(), ...sty.full(), backgroundColor: '#333' }}>
                {children ? children[this.ob.num] : null}
                {g.isPc ? <div style={{ ...naviBar }} onMouseEnter={this.handleBarMouseIn} onMouseLeave={this.handleBarMouseOut}>
                    <div style={{ ...nextSty, backgroundColor: this.ob.preBGC, ...sty.TSR(null, [this.ob.preY, this.ob.preY]), left: 10 }} onMouseEnter={() => { this.handleMouseIn('pre') }} onMouseOut={() => { this.handleMouseOut('pre') }} onClick={this.handlePre}>{'<'}</div>
                    <div style={{ ...barMiddle }}>{this.ob.num + 1}/{children.length}</div>
                    <div style={{ ...nextSty, backgroundColor: this.ob.nextBGC, ...sty.TSR(null, [this.ob.nextY, this.ob.nextY]), right: 10 }} onMouseEnter={() => { this.handleMouseIn('next') }} onMouseOut={() => { this.handleMouseOut('next') }} onClick={this.handleNext}>{'>'}</div>
                </div> :
                    <div style={{ ...sty.full(), backgroundColor: 'rgba(0,0,0,0.01)', ...sty.box('h')}}>
                        <div style={{ width: '50%', height: '100%'}} onClick={this.handlePre}></div>
                        <div style={{ width: '50%', height: '100%'}} onClick={this.handleNext}></div>
                    </div>    
                }
            </div>
        )
    }
    handlePre = () => {
        this.ob.pre()
    }
    handleNext = () => {
        this.ob.next()
    }
    handleMouseIn = (type) => {
        if (type === 'pre') {
            this.preAnim.play()
        } else if (type === 'next') {
            this.nextAnim.play()
        }
    }
    handleMouseOut = (type) => {
        if (type === 'pre') {
            this.preAnimBack.play()
        } else if (type === 'next') {
            this.nextAnimBack.play()
        }
    }
    handleBarMouseIn = () => {
        this.barAnim.play()
    }
    handleBarMouseOut = () => {
        this.barAnimBack.play()
    }
    componentWillUnmount() {
        this.preAnim.stoping = true
        this.preAnimBack.stoping = true
        this.nextAnim.stoping = true
        this.nextAnimBack.stoping = true
        this.barAnim.stoping = true
        this.barAnimBack.stoping = true
    }
})
export default PPT